<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Footer</title>
	<link rel="shortcut icon" type="image/x-icon" href="../img/yitiao-icon.png">
	<link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.7/dist/css/bootstrap.min.css"/>
	<link rel="stylesheet" href="../css/footer-bar.css">
	<style>
		* {
		    padding: 0;
		    margin: 0;
		}
		.plus {
		    width: 27px;
		    height: 27px;
		    color: #ffe0a3;
		}
		.footer-title {
		    color: darkgrey;
		}
		.active {
		    border-bottom: 2px solid;
		    color: #ffe0a3;
		}
		.active .footer-title {
		    color: #141414;
		}
		footer {
		    width: 100%;
		    /*position: absolute;*/
		    /*position: sticky;*/
		    position: fixed;
		    bottom: 0;
		    padding: 1px;
		    background-color: white;
		    z-index: 999;
		}
		#footer-bar {
		    display: flex;
		    flex-flow: row nowrap;
		    justify-content: space-between;
		    align-items: center;
		    margin: 10px 30px;
		}
	</style>
</head>
<body>
	<footer>
		<div id="footer-bar">
			<div class="item find active">
				<a href="../index.jsp" style="text-decoration: none">
					<span class="footer-title">发现</span>
				</a>
			</div>
			<div class="item follow">
				<a href="follow.jsp" style="text-decoration: none">
					<span class="footer-title">关注</span>
				</a>
			</div>
			<div class="item release">
				<a href="./release.jsp" style="text-decoration: none">
					<img src="../img/find/plus.png" alt="plus" class="plus">
				</a>
			</div>
			<div class="item information">
				<a href="./information.jsp" style="text-decoration: none">
					<span class="footer-title">消息</span>
				</a>
			</div>
			<div class="item home">
				<a href="home.jsp" style="text-decoration: none">
					<span class="footer-title">我的</span>
				</a>
			</div>
		</div>
	</footer>
</body>
<script src="../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../lib/bootstrap-3.3.7/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('.find').click(function () {
    $(this).addClass('active');
    $('.follow').removeClass('active');
    $('.information').removeClass('active');
    $('.home').removeClass('active');
});
$('.follow').click(function () {
    $('.find').removeClass('active');
    $(this).addClass('active');
    $('.information').removeClass('active');
    $('.home').removeClass('active');
});
$('.information').click(function () {
    $('.find').removeClass('active');
    $('.follow').removeClass('active');
    $(this).addClass('active');
    $('.home').removeClass('active');
});
$('.home').click(function () {
    $('.find').removeClass('active');
    $('.follow').removeClass('active');
    $('.information').removeClass('active');
    $(this).addClass('active');
});
</script>
</html>